<template>
  <div class="box-container">
    <div class="box-header">
      <div class="title">
        <template v-if="type == 'cert'">
          <template v-if="lang == 'cn'">
            个人资质证书
            <span class="span_1"
              >请上传资质证书图片（JPG格式 上传限制：800K）</span
            >
            <span class="span_2">请上传资质证书图片</span>
          </template>
          <template v-if="lang == 'en'">
            Personal Qualification Certificate
            <span class="span_1"
              >Please upload a picture of the qualification certificate（JPG
              format, Upload Limit: 800K）</span
            >
            <span class="span_2"
              >Please upload a picture of the qualification certificate</span
            >
          </template>
        </template>
        <template v-if="type == 'intention'">
          <span v-if="lang == 'cn'">求职意向</span>
          <span v-if="lang == 'en'">Job Intention</span>
        </template>
        <template v-if="type == 'work'">
          <span v-if="lang == 'cn'">工作经验</span>
          <span v-if="lang == 'en'">Work Experience</span>
        </template>
        <template v-if="type == 'edu'">
          <span v-if="lang == 'cn'">教育经历</span>
          <span v-if="lang == 'en'">Education Experience</span>
        </template>
        <template v-if="type == 'skill'">
          <span v-if="lang == 'cn'">专业技能</span>
          <span v-if="lang == 'en'">Professional Skills</span>
        </template>
        <template v-if="type == 'honor'">
          <span v-if="lang == 'cn'">成就奖励</span>
          <span v-if="lang == 'en'">Achievement Awards</span>
        </template>
      </div>
      <div class="button" @click="onClickButton">
        <svg
          v-if="type != 'cert' && type != 'intention'"
          data-v-d523db06=""
          viewBox="0 0 16 16"
          fill="#ffffff"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            data-v-d523db06=""
            d="M2.66699 8.00012H13.3337"
            stroke="white"
          ></path>
          <path
            data-v-d523db06=""
            d="M8 2.66681L8 13.3335"
            stroke="white"
          ></path>
        </svg>
        <span v-if="type == 'cert'">
          <template v-if="lang == 'cn'">上传证书</template>
          <template v-if="lang == 'en'">Upload Certificate</template>
        </span>
        <span v-if="type == 'intention'">
          <template v-if="lang == 'cn'">立即修改</template>
          <template v-if="lang == 'en'">Immediate edit</template></span
        >
        <span v-if="type == 'work'">
          <template v-if="lang == 'cn'">新增工作</template>
          <template v-if="lang == 'en'">Add Job</template></span
        >
        <span v-if="type == 'edu'">
          <template v-if="lang == 'cn'">新增教育经历</template>
          <template v-if="lang == 'en'"
            >Add Edu Experience</template
          ></span
        >
        <span v-if="type == 'skill'">
          <template v-if="lang == 'cn'">新增技能</template>
          <template v-if="lang == 'en'">Add Skill</template></span
        >
        <span v-if="type == 'honor'">
          <template v-if="lang == 'cn'">新增成就奖励</template>
          <template v-if="lang == 'en'">Add Achievement Award</template></span
        >
      </div>
      <div
        v-if="type != 'cert' && type != 'intention'"
        class="button_2"
        @click="onClickButton"
      >
        {{ $t("btnText.add") }}
      </div>
    </div>
    <div class="box-content" :style="{ padding: noGap ? '0' : '' }">
      <div
        class="inner"
        :style="{ padding: noGap || type == 'cert' ? '0' : '' }"
      >
        <slot></slot>
      </div>
      <div class="footer-tips" v-if="type == 'cert'">
        <span> {{ $t("content.profile.job.cert_desc_2") }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, inject } from "vue";

type Type = "cert" | "intention" | "work" | "edu" | "skill" | "honor";
type Props = {
  type: Type;
  noGap: boolean;
};

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

let lang = inject("lang");

const emits = defineEmits(["clickButton"]);
const props = withDefaults(defineProps<Props>(), {
  noGap: true,
});

const onClickButton = () => {
  emits("clickButton", props.type);
};
</script>
<style scoped lang="less">
.box-container {
  margin-top: 24px;
  border-radius: 16px 16px 16px 16px;
  border: 1px solid #ccd6de;
  overflow: hidden;
  margin-right: 120px;
  .box-header {
    background-color: #f5f8fa;
    text-align: center;
    position: relative;
    display: flex;
    padding-left: 200px;
    .cert-title {
    }
    .title {
      padding: 17px 0;
      font-size: 16px;
      color: #172026;
      flex: 1;
      span {
        font-size: 12px;
        color: #70818c;
        &.span_2 {
          display: none;
        }
      }
    }
    .button {
      align-self: stretch;
      font-size: 16px;
      color: #f5f8fa;
      width: 200px;
      gap: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #3d88f2;
      cursor: pointer;
      svg {
        width: 16px;
        height: 16px;
      }
    }
    .button_2 {
      display: none;
    }
  }
  .box-content {
    padding: 24px;
    box-sizing: border-box;
    .inner {
      padding: 0 48px;
    }
  }
  .footer-tips {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .box-container {
    margin-top: 123px;
    margin-right: 0;
    border-radius: 82px;
    .box-header {
      background-color: transparent;
      padding: 82px;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        font-size: 82px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        span {
          font-size: 61px;
          &.span_2 {
            display: block;
          }
          &.span_1 {
            display: none;
          }
        }
      }
      .button {
        display: none;
      }
      .button_2 {
        display: block;
        font-size: 72px;
        color: #3d88f2;
        width: 266px;
        height: 164px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(61, 136, 242, 0.1);
        border-radius: 51px 51px 51px 51px;
      }
    }
    .box-content {
      padding: 82px;
      padding-top: 0;
    }
    .footer-tips {
      display: block;
      margin-top: 82px;
      font-size: 61px;
      color: #70818c;
    }
  }
}
</style>
